import React from 'react';

// Type definitions
interface Gift {
  id: string;
  name: string;
  price: number;
  image: string;
  icon?: string;
  animation?: string;
}

interface GiftComponentProps {
  visible: boolean;
  onClose: () => void;
  onSendGift: (gift: Gift) => void;
  money: number;
}

// This is an example gift list, you can modify it or fetch from server
// Using SVG format for gift icons
const gifts: Gift[] = [
  { id: 'rose', name: '玫瑰', price: 1, image: '/assets/gifts/rose.svg', icon: '/assets/gifts/rose.svg' },
  { id: 'diamond', name: '钻石', price: 10, image: '/assets/gifts/diamond.svg', icon: '/assets/gifts/diamond.svg' },
  { id: 'crown', name: '皇冠', price: 100, image: '/assets/gifts/crown.svg', icon: '/assets/gifts/crown.svg' },
  { id: 'rocket', name: '火箭', price: 1000, image: '/assets/gifts/rocket.svg', icon: '/assets/gifts/rocket.svg' },
];

const giftPanelStyle: React.CSSProperties = {
  position: 'fixed',
  bottom: 0,
  left: 0,
  right: 0,
  backgroundColor: 'rgba(0, 0, 0, 0.85)',
  backdropFilter: 'blur(5px)',
  borderTopLeftRadius: '20px',
  borderTopRightRadius: '20px',
  padding: '20px',
  transform: 'translateY(100%)',
  transition: 'transform 0.3s ease-in-out',
  zIndex: 1001,
  color: '#fff',
};

const giftPanelVisibleStyle: React.CSSProperties = {
  transform: 'translateY(0)',
};

const giftGridStyle: React.CSSProperties = {
  display: 'grid',
  gridTemplateColumns: 'repeat(4, 1fr)',
  gap: '15px',
  textAlign: 'center',
};

const giftItemStyle: React.CSSProperties = {
  cursor: 'pointer',
  padding: '10px',
  borderRadius: '8px',
  transition: 'background-color 0.2s',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  gap: '5px',
};

const giftIconStyle: React.CSSProperties = {
  width: '50px',
  height: '50px',
};

const GiftComponent: React.FC<GiftComponentProps> = ({ visible, onClose, onSendGift, money }) => {
  const handleSend = (gift: Gift) => {
    // Check if user has enough money
    if (money < gift.price) {
      alert(`金币不足，您当前有${money}金币，需要${gift.price}金币`);
      return;
    }
    
    // In a real application, you can handle coin deduction logic here
    console.log(`发送礼物: ${gift.name}`);
    onSendGift(gift);
  };

  // Close panel when clicking on the background
  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  return (
    <div 
      style={{ ...giftPanelStyle, ...(visible ? giftPanelVisibleStyle : {}) }} 
      onClick={handleOverlayClick}
    >
      <div onClick={(e) => e.stopPropagation()}>
        <div style={{ 
          paddingBottom: '10px', 
          borderBottom: '1px solid #444', 
          marginBottom: '15px', 
          fontSize: '18px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}>
          <span>赠送礼物</span>
          <button 
            onClick={onClose} 
            style={{
              background: 'transparent',
              border: 'none',
              color: '#aaa',
              fontSize: '20px',
              cursor: 'pointer',
              padding: '0 8px',
              lineHeight: '1'
            }}
          >
            ×
          </button>
        </div>
        <div style={giftGridStyle}>
          {gifts.map(gift => (
            <div
              key={gift.id}
              style={giftItemStyle}
              onClick={() => handleSend(gift)}
              onMouseOver={(e) => {
                const target = e.currentTarget;
                target.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
              }}
              onMouseOut={(e) => {
                const target = e.currentTarget;
                target.style.backgroundColor = 'transparent';
              }}
            >
              <img 
                src={gift.icon || gift.image} 
                alt={gift.name} 
                style={giftIconStyle} 
                onError={(e) => {
                  const target = e.target as HTMLImageElement;
                  target.src = '/assets/gifts/default.svg';
                }}
              />
              <div>{gift.name}</div>
              <div style={{ fontSize: '12px', color: '#ffd700' }}>{gift.price} 金币</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: '15px', textAlign: 'center', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ color: '#ffd700', fontSize: '14px' }}>当前金币: {money}</div>
          <button 
            onClick={onClose} 
            style={{
              background: 'rgba(255, 255, 255, 0.2)',
              border: 'none',
              borderRadius: '4px',
              color: 'white',
              padding: '8px 16px',
              cursor: 'pointer'
            }}
          >
            完成送礼
          </button>
        </div>
      </div>
    </div>
  );
};

export default GiftComponent;